
<script>
import dmbForm from "@/components/DmbForm";
import dmbTable from "@/components/LTable/index.vue";
import {
  formBase,
  tableBase,
  cellStyle,
  headerCellStyle,
  tableFormStyle,
  formItemStyle,
} from "./config";
import { mapState } from "vuex";
import dayjs from "dayjs";
import store from "@/store";
import { couponTemplate_ListAPI, coupon_addAPI } from "@/api/payment/coupon.js";
import loginVue from "../../login.vue";
const defaultForm = {
  startTime: "",
  endTime: "",
  dateType: "",
  userId: "",
  userName: "",
  endTime: "",
  endTime: "",
};
export default {
  name: "specialdel",
  computed: {
    ...mapState({
      company: (state) => state.custom_dict.company,
      shop: (state) => state.custom_dict.shop,
    }),
    formItemStyle() {
      return formItemStyle;
    },
    tableFormStyle() {
      return tableFormStyle;
    },
    cellStyle() {
      return cellStyle;
    },
    headerCellStyle() {
      return headerCellStyle;
    },
  },
  components: { dmbTable, dmbForm },
  data() {
    return {
      propsSearchForm: { ...defaultForm },
      rebase: formBase,
      requestConfig: {
        url: "/payment/manageCoupon/queryUserCoupon",
        method: "get",
        montage: true,
      },
      selectionArr: [], // 多选框内容
      selectionArr2: [], // 多选框内容
      tableSearchForm: { ...defaultForm },
      listUser: [],
      customsClearanceCompany_List: [],
      CouponTemplate_List: [],
      dialogFormVisible: false,
      add_form: {
        couponTemplateId: "",
        userIds: "",
        couponNum: "",
        remark: "",
      },
      rules: {
        couponTemplateId: [
          { required: true, message: "请选择赠送模板", trigger: "blur" },
        ],
        userIds: [{ required: true, message: "请填写会员ID", trigger: "blur" }],
        couponNum: [
          { required: true, message: "请填写赠送张数", trigger: "blur" },
        ],
        remark: [{ required: true, message: "请填写备注", trigger: "blur" }],
      },
      coupon_type: "",
    };
  },
  methods: {
    tableBase() {
      return tableBase;
    },
    selectionChange(data) {
      // 多选框内容
      this.selectionArr = data;
    },
    async addCoupon() {
      const { rows } = await couponTemplate_ListAPI();
      this.CouponTemplate_List = rows;
      // 赠送集运券
      this.dialogFormVisible = true;
    },
    coupon_add() {
      this.$refs.add_form.validate(async (res) => {
        console.log(this.add_form);
        if (!res) return;
        await coupon_addAPI(this.add_form);
        this.dialogFormVisible = false;
        this.$message.success("赠送集运券成功");
      });
    },
    dialogClose() {
      this.add_form = {
        couponTemplateId: "",
        userIds: "",
        couponNum: "",
        remark: "",
      };
      this.coupon_type = "";
      this.$refs.add_form.clearValidate();
    },
  },
  watch: {
    propsSearchForm: {
      deep: true,
      handler: function (value) {
        this.tableSearchForm = { ...value };
        delete this.tableSearchForm.shelfTime;
        // 日期
        if (!value?.shelfTime?.length) {
          this.tableSearchForm.startDate = "";
          this.tableSearchForm.endDate = "";
        } else if (value?.shelfTime?.length) {
          this.tableSearchForm.startDate = dayjs(value.shelfTime[0]).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          this.tableSearchForm.endDate = dayjs(value.shelfTime[1]).format(
            "YYYY-MM-DD HH:mm:ss"
          );
        }
        // 店铺
        if (value.ownedStore) {
          const obj = this.shop.find((item) => {
            return item.id == value.ownedStore;
          });
          this.tableSearchForm.ownedStore = obj ? obj.shopName : "";
        }
      },
    },
    coupon_type: {
      handler(value) {
        const list = this.coupon_type
          .split("\n")
          .filter((el) => !/^\s+$/.test(el));
        this.add_form.userIds = list[0] ? list : [];
      },
    },
  },
};
</script>
<template>
  <div>
    <div class="overflow-auto">
      <dmb-form
        ref="form"
        :form-items="rebase"
        :model-value="propsSearchForm"
        :item-style="formItemStyle"
       @update="(row) => (propsSearchForm = row)"
      >
        <template v-slot:header="row" class="flex flex-row-reverse">
          <div class="mb-3 flex flex-row-reverse">
            <div>
              <el-button type="success" @click="$refs.table.getListData()"
                >查询</el-button
              >
              <el-button type="primary" @click="addCoupon"
                >赠送集运券</el-button
              >
            </div>
          </div>
        </template>
      </dmb-form>
    </div>
    <dmb-table
      ref="table"
      :CustomDoubleClick="true"
      :prop-list="tableBase()"
      :show-index-column="true"
      select-column-type="CHECKBOX"
      :props-search-form="tableSearchForm"
      :req-request="requestConfig"
      select-key="id"
      :cell-style="cellStyle"
      :header-cell-style="headerCellStyle"
      :initialize="false"
      :change-search-form="false"
      :show-footer="true"
      :form-item-style="tableFormStyle"
      @selectionChange="
        (row) => {
          selectionArr = row;
        }
      "
    >
      <!-- 优惠券类型（0=现金券，1=折扣券） -->
      <template v-slot:couponType="{ row }">
        <span class="text-[#13ce66]" v-if="row.couponType">折扣券</span>
        <span class="text-[#0b57d0]" v-else>现金券</span>
      </template>
      <!-- 发放类型（赠送类型 0=注册券，1=平台券）-->
      <template v-slot:grantType="{ row }">
        <span class="text-[#13ce66]" v-if="row.grantType">平台券</span>
        <span class="text-[#0b57d0]" v-else>注册券</span>
      </template>
      <!-- 是否已过期（0=已过期，1=未过期））-->
      <template v-slot:status="{ row }">
        <span class="text-[#13ce66]" v-if="row.status === 0">未过期</span>
        <span class="text-[red]" v-else>已过期</span>
      </template>
      <!-- @ApiModelProperty("是否已使用（0=未使用，1=已使用）")-->
      <template v-slot:isUsed="{ row }">
        <span class="text-[#13ce66]" v-if="row.isUsed">已使用</span>
        <span class="text-[#0b57d0]" v-else>未使用</span>
      </template>
    </dmb-table>
    <el-dialog
      @close="dialogClose"
      width="30%"
      title="赠送集运券"
      :visible.sync="dialogFormVisible"
    >
      <el-form
        label-position="left"
        :model="add_form"
        :rules="rules"
        ref="add_form"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-row>
          <el-col :span="20">
            <el-form-item label="集运券模板" prop="couponTemplateId">
              <el-select
                v-for="item in CouponTemplate_List"
                :key="item.id"
                v-model="add_form.couponTemplateId"
                placeholder="请选择集运券模板"
              >
                <el-option
                  :label="`${item.grantType ? '注册发放' : '平台发放'}-${
                    item.couponType === 0 ? '现金券' : '--'
                  }-${item.denomination}`"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="会员ID" prop="userIds">
              <el-input
                :autosize="{ minRows: 4 }"
                type="textarea"
                placeholder="请输入会员ID"
                v-model="coupon_type"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="赠送张数" prop="couponNum">
              <el-input-number
                v-model="add_form.couponNum"
                controls-position="right"
                :min="1"
                :max="10"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="备注">
              <el-input
                type="textarea"
                placeholder="请填写备注"
                v-model="add_form.remark"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer text-center">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="coupon_add">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.son {
  overflow: auto;
}
</style>
